<template>
    <view class="container">
        <u-transition :show="show">
            <!--u-navbar
                leftIconSize="44rpx"
                :autoBack="true"
                bgColor="#131415"
                leftIconColor="#ffffff"
            >
            </u-navbar--->
            <!-- #ifdef H5 -->
            <view style="height: 30px"></view>
            <!-- #endif -->
            <view class="title">
                <u-text
                    :text="productInfo.name"
                    size="34rpx"
                    :lines="1"
                    bold
                    color="#FFFFFF"
                    align="center"
                ></u-text>
            </view>
            <view v-if="productInfo.type != 'shop' && isShowTags=='1'" class="nft-tag"></view>
            <view class="product-image">
                <z-swiper effect="cube" v-if="productInfo.albumImgs.length > 1" :loop="false" autoplay="3000" @change="onChange" :showIndicators="false" customStyle="height:556rpx;width:556rpx;">
                    <z-swiper-item v-for="(img, k) in productInfo.albumImgs" :key="k">
                        <image class="image" :src="img.url"
                            mode="aspectFill">
                        </image>
                    </z-swiper-item>
                </z-swiper>
                <image v-else
                    :src="productInfo.mainImg"
                    style="width:556rpx;height:828rpx;"
                    class="image"
                    mode="widthFix"
                ></image>
            </view>
            <view class="dot">
                <view class="dot-item" :class="actionDot==k? 'dot-action':null" v-for="(img, k) in productInfo.albumImgs" :key="k"></view>
            </view>
            <view class="nft-detail">
                <view class="nft-stock">
                    <view class="nft-stock-name">发行量</view>
                    <view class="nft-stock-content">{{ productInfo.nft.total }}</view>
                </view>
                <block v-if="ext && ext.hide == '1'">
                    <view class="nft-info-tag">不开售</view>
                    <view class="nft-info-tag">抽奖获得</view>
                </block>
                <block v-else>
                    <view class="nft-info-tag" v-if="ext">限购1份</view>
                    <view class="nft-info-tag">可转赠</view>
                </block>
            </view>
            <view style="padding: 30rpx 30rpx 0 30rpx;" v-if="productInfo.author">
                <view class="user">
                    <view class="user-image">
                        <image :src="productInfo.author.avatar" style="width: 100%; height: 100%;border-radius: 50%;"></image>
                    </view>
                    <view class="user-info">
                        <view class="user-desc">创作者</view>
                        <view class="user-name">{{ productInfo.author.name }}</view>
                    </view>
                </view>
                <view class="border" style="margin-bottom: 20rpx;"></view>
            </view>
            <block v-if="checkSpecNames">
                <view class="check-sku">
                    <view class="check-sku-title">已选</view>
                    <view class="check-sku-content">
                        <u-cell
                            :title="'数量 x' + number + ' '+checkSpecNames"
                            :border="false"
                            isLink
                            rightIconStyle="font-size: 28rpx;color: #ffffff;"
                            titleStyle="font-size: 24rpx;color: #ffffff;"
                            @click="showpopup"
                        ></u-cell>
                    </view>
                </view>
                <view class="border" style="margin-top: 20rpx"></view>
            </block>
            <view class="detail-item" style="margin-top: 50rpx;">
                <view class="detail-title">···————「 藏品故事 」————···</view>
                <view class="product-detail"><rich-text :nodes="productInfo.detail"></rich-text></view>
            </view>
            <view class="border"></view>
            <view class="detail-item">
                <view class="detail-title">···————「 发行信息 」————···</view>
                <view class="nft-info" v-if="productInfo.nft">
                    <u-row customStyle="margin-bottom: 40rpx" :gutter="20">
                        <u-col span="6">
                            <u-text
                                text="合约地址"
                                size="24rpx"
                                color="#B6B6B6"
                            ></u-text>
                            <view class="input">
                                <text>{{ getSpliceText(productInfo.nft.contractAddr) }}</text>
                                <text @click="copy(productInfo.nft.contractAddr)">复制</text>
                            </view>
                        </u-col>
                        <u-col span="6">
                            <u--text
                                text="认证标识"
                                size="24rpx"
                                color="#B6B6B6"
                            ></u--text>
                            <view class="input">
                                <text>{{ productInfo.nft.tokenId }}</text>
                                <text @click="copy(productInfo.nft.tokenId)">复制</text>
                            </view>
                        </u-col>
                    </u-row>
                    <u-row customStyle="margin-bottom: 40rpx" :gutter="20">
                        <u-col span="6">
                            <u-text
                                text="认证标准"
                                size="24rpx"
                                color="#B6B6B6"
                            ></u-text>
                            <view class="text-info">
                                <block v-if="productInfo.nft.type == 'e721'">
                                ERC721
                                </block>
                                <block v-if="productInfo.nft.type == 'e1155'">
                                ERC1155
                                </block>
                            </view>
                        </u-col>
                        <u-col span="6">
                            <u-text
                                text="认证网络"
                                size="24rpx"
                                color="#B6B6B6"
                            ></u-text>
                            <view class="text-info">
                                Polygon
                            </view>
                        </u-col>
                    </u-row>
                </view>
            </view>
            <view class="border" style="margin: 0;"></view>
            <view class="extend">
                <view class="extend-item" v-for="(item, k) in productInfo.extendInfo" :key="k">
                    <view class="extend-title">···————「 {{ item.title }} 」————···</view>
                    <view class="extend-content">{{ item.content }}</view>
                </view>
            </view>
            <view v-if="ext && ext.hide != '1'" style="height: 104rpx"></view>
            <view class="bottom" v-if="ext">
                <view class="sold" v-if="ext.hide == '1'">
                    <view class="total-price">
                        <text>¥</text>
                        <text>{{ price }}</text>
                    </view>
                    <view class="btn-sold">隐藏款</view>
                </view>
                <block v-else>
                    <view class="buy"  v-if="ext.grabEndTime > 0 || (grabOrderDetail &&　grabOrderDetail.state == 'win')" >
                        <view class="price">
                            <view class="total-price">
                                <text>¥</text>
                                <text>{{ userTicket? price*userTicket.ticket.discount:price }}</text>
                            </view>
                            <view v-if="userTicket" class="un-total-price">
                                <text>¥</text>
                                <text>{{ price }}</text>
                            </view>
                        </view>
                        <view class="btns" v-if="userId">
                            <block v-if="inviteNum >= 5 && buy === 0">
                                <view class="rob-btn" @click="onsubmit">立即购买</view>
                            </block>
                            <block v-else>
                                <block v-if="grabOrderDetail">
                                    <view class="rob-btn" v-if="grabOrderDetail.state == 'pay'" @click="onGrabSubmit(grabOrderDetail.id)">去支付</view>
                                    <view class="rob-btn" v-if="grabOrderDetail.state == 'wait'">已抢购</view>
                                    <!--view class="rob-btn" v-if="grabOrderDetail.state == 'win'" @click="wxPayment(grabOrderDetail.id)">去付款</view-->
                                    <view class="rob-btn" v-if="grabOrderDetail.state == 'win'" @click="showPaySheet()">去付款</view>
                                </block>
                                <view class="rob-btn" v-else @click="onGrabSubmit()">报名抢购</view>
                                <view v-if="userTicket" class="ticket">
                                    <u-icon
                                        :name="userTicket.ticket.icon"
                                        width="86rpx"
                                        height="36rpx"
                                    ></u-icon>
                                </view>
                            </block>
                        </view>
                        <view v-else class="buy-btn" @click="onlogin">立即登录</view>
                    </view>
                    <view class="bottom" v-else>
                        <view class="sold">
                            <view class="total-price">
                                <text>¥</text>
                                <text>{{ price }}</text>
                            </view>
                            <view class="btn-sold">已售罄</view>
                        </view>
                    </view>
                </block>
            </view>
            <block v-else>
                <view class="bottom" v-if="!isSold">
                    <view class="buy">
                        <view class="price">
                            <view class="total-price">
                                <text>¥</text>
                                <text>{{ price }}</text>
                            </view>
                            <!--view class="un-total-price">
                                <text>¥</text>
                                <text>{{ price }}</text>
                            </view-->
                        </view>
                        <view class="btns" v-if="userId">
                            <view v-if="productInfo.type === 'nft'" class="buy-btn" @click="onsubmit">立即购买</view>
                            <view  v-else class="buy-btn" @click=" checkSpecNames? onsubmit():showpopup()">立即购买</view>
                        </view>
                        <view v-else class="buy-btn" @click="onlogin">立即登录</view>
                    </view>
                </view>
                <view class="bottom" v-else>
                    <view class="sold">
                        <view class="total-price">
                            <text>¥</text>
                            <text>{{ price }}</text>
                        </view>
                        <view class="btn-sold">已售罄</view>
                    </view>
                </view>
            </block>
            <view class="activity" v-if="ext && ext.hide != '1'">
                <view class="activity-title">抢购可抽奖·解锁隐藏款</view>
                <view class="activity-info">
                    <view class="activity-info-people">
                        <text>当前报名人数</text>
                        <text>{{ ext.grabNum }}</text>
                    </view>
                    <view class="activity-info-time">
                        <u-count-down
                                :time="ext.grabEndTime"
                                format="HH:mm:ss"
                                :autoStart="ext.grabEndTime > 0"
                                @change="countChange"
                        >
                            <view class="time">
                                <u-icon
                                    name="https://img.ionepin.com/c4098afeac81d4e598d2e59508b9cd091b3b1405.png"
                                    width="30rpx"
                                    height="30rpx"
                                ></u-icon>
                                <text>抢购倒计时</text>
                                <text class="time__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}:</text>
                                <text class="time__item">{{ timeData.minutes>=10? timeData.minutes:'0'+timeData.minutes }}:</text>
                                <text class="time__item">{{ timeData.seconds>=10? timeData.seconds:'0'+timeData.seconds }}</text>
                            </view>
                        </u-count-down>
                    </view>
                </view>
            </view>
            <u-toast ref="uToast"></u-toast>
        </u-transition>
        <u-popup :show="popupshow" :round="10" @close="closePopup" mode="bottom">
            <view class="popup">
                <view class="sku">
                    <u-image
                        :src="checkSkuImg"
                        width="180rpx"
                        height="180rpx"
                        radius="12rpx"
                    ></u-image>
                    <view class="info">
                        <view class="text-1">
                            <u-text
                                :text="productInfo.name"
                                size="30rpx"
                                color="#000000"
                                :lines="2"
                            ></u-text>
                        </view>
                        <view class="text-2">
                            <u-text
                                :text="'库存：' + stock"
                                size="24rpx"
                                color="#666666"
                            ></u-text>
                        </view>
                        <view class="text-3">
                            <u-text
                                :text="price"
                                size="34rpx"
                                color="#356CE7"
                                blod
                                mode="price"
                                iconStyle="22rpx"
                            ></u-text>
                        </view>
                    </view>
                </view>
                <u-list
                    height="300rpx"
                    v-if="productInfo.specInfo.length > 0"
                >
                    <view class="spec-info" style="margin-top: 30rpx;" v-for="(item, index) in productInfo.specInfo" :key="index">
                        <u-row justify="space-between">
                            <u-col span="6">
                                <u-text
                                    :text="item.name"
                                    size="24rpx"
                                    color="#000000"
                                ></u-text>
                            </u-col>
                        </u-row>
                        <view class="spec">
                            <block
                                v-for="(spec_value, k) in item.spec_value"
                                :key="k"
                            >
                                <view
                                    class="spec-tag"
                                    :class="spec_value.disable? 'disable': ''"
                                    v-if="!spec_value.check"
                                    @click="checkSpecValue(item.id, spec_value, index)"
                                >{{ spec_value.name }}</view>
                                <view
                                    v-else
                                    class="spec-tag selected"
                                    @click="checkSpecValue(item.id, spec_value, index)"
                                >{{ spec_value.name }}</view>
                            </block>
                        </view>
                    </view>
                </u-list>
                <view class="spec-info">
                    <u-row justify="space-between">
                        <u-col span="6">
                            <u-text
                                text="属性"
                                size="24rpx"
                                color="#000000"
                            ></u-text>
                        </u-col>
                    </u-row>
                    <view class="spec" v-if="productInfo.type == 'shop'">
                        <view class="spec-tag selected">寄售商品</view>
                    </view>
                    <view class="spec" v-if="productInfo.type == 'nft'">
                        <view class="spec-tag selected">数字藏品</view>
                    </view>
                    <view class="spec" v-if="productInfo.type == 'nft_shop'">
                        <view class="spec-tag selected">寄售商品</view>
                        <view class="spec-tag selected">数字藏品</view>
                    </view>
                </view>
                <view class="spec-info">
                    <u-row justify="space-between">
                        <u-col span="6">
                            <u-text
                                text="数量"
                                size="24rpx"
                                color="#000000"
                            ></u-text>
                        </u-col>
                        <u-col span="6">
                            <view class="buy-num">
                                <view class="minus" :class="number <= 1? 'minus-disabled':null" @click="count(-1)"></view>
                                <view class="num">{{ number }}</view>
                                <view class="add" :class="number>=stock? 'add-disabled':null" @click="count(1)"></view>
                            </view>
                        </u-col>
                    </u-row>
                </view>
                <view @click="addCartsubmit" v-if="isCart" class="buy-btn">加入购物车</view>
                <view @click="onsubmit" v-else class="buy-btn">立即购买</view>
            </view>
        </u-popup>
        <u-modal
            :show="modalShow"
            confirmText="去认证"
            title="实名认证"
            content='购买NFT藏品需要实名认证，请完成认证再购买'
            @confirm="navigateTo('pages/identify/index')"
        ></u-modal>
        <new-people></new-people>
        <pay-platform
            :sheetShow="sheetShow"
            :orderId="sheetData.orderId"
            :payPrice="sheetData.payPrice"
            :orderType="sheetData.orderType"
            @pay="payCallback"
            @close="closeSheet"
        ></pay-platform>
    </view>
</template>
<script>
import { getProductInfo, nftCreateOrder, getWechatPay, addCart, getUserTicket, getGrabOrderDetail } from "@/config/api"
import { createGrabOrder, payGrabOrder, pvProduct, getUnionPay, unionWechatPay, wechatOrderPay } from "@/config/api-java"
import NewPeople from "@/components/NewPeople"
import PayPlatform from "@/components/PayPlatform"
export default {
    components: {
        NewPeople,
        PayPlatform
    },
    data() {
        return {
            productInfo: {
                product_sku: [],
                albumImgs: [],
                nft: {},
                specInfo: []
            },
            showflag: false,
            checkSku: [],
            price: null,
            checkSkuId: null,
            checkSkuImg: null,
            checkSpecNames: null,
            barHeight: "0px",
            confirm: null,
            isSold: false,
            stock: null,
            show: false,
            popupshow: false,
            actionDot: 0,
            number: 1,
            isCart: false,
            timeData: {},
            ext: null,
            userTicket: null,
            grabPayment: null,
            productId: null,
            grabOrderDetail: null,
            modalShow: false,
            sheetShow: false,
            sheetData: {
                orderId: null,
                payPrice: null
            }
        }
    },
    async onLoad(option) {
        //console.log(res.statusBarHeight)
        //this.top = res.statusBarHeight+44 + 'px'
        //this.barHeight = res.statusBarHeight + 44 + "px"
        //const res = uni.getSystemInfoSync()
        //var height = res.statusBarHeight
        //var height = this.$store.getters.statusBarHeight
        this.barHeight = "44px"//height? height + 44 + "px": "0px"
        /*await this.getData(option.productId)
        this.show = true
        this.userTicket = await getUserTicket()*/
        this.productId = option.productId
        pvProduct(this.productId)
    },
    async onShow() {
        this.modalShow = false
        await this.getData(this.productId)
        this.show = true
        //await this.getUserData()
    },
    computed: {
        userId() {
            if (this.$store.getters.userId) {
                this.getUserData()
            }
            return this.$store.getters.userId
        },
        isShowTags() {
            return this.$store.getters.isShowTags
        },
        buy() {
            return this.$store.getters.buy
        },
        inviteNum() {
            return this.$store.getters.inviteNum
        }
    },
    methods: {
        onChange(index) {
            this.actionDot = index
        },
        async getData(id) {
            this.productInfo = await getProductInfo(id)
            this.stock = this.productInfo.stock
            this.isSold = this.productInfo.stock > 0? false:true
            this.productInfo.specInfo.forEach(item => {
                item.spec_value.forEach(v => {
                    v.check = false
                    v.disable = false
                })
            })
            this.price = this.productInfo.price
            this.checkSkuImg = this.productInfo.mainImg
            this.ext = this.productInfo.ext
        },
        checkSpecValue(specId, specValue, index) {
            if (specValue.disable) {
                return
            }
            this.showflag = !this.showflag          //Uniapp bug 删了无法更新视图
            this.checkSku[index] = specValue.id
            this.price = this.getPrice()
            this.productInfo.specInfo.forEach((item, i) => {
                item.spec_value.forEach(v => {
                    if (v.id == specValue.id) {
                        v.check = true
                    } else if (item.id == specId) {
                        v.check = false
                    }
                    if(index != i) {
                        var specIds = []
                        specIds[index] = specValue.id
                        specIds[i] = v.id
                        var disable = true
                        this.productInfo.product_sku.forEach(sku => {
                            if (specIds.toString() == sku.specIds.toString()) {
                                //console.log(specIds.toString() +"=="+sku.specIds.toString())
                               disable = false
                            }
                        })
                        v.disable = disable
                    }
                })
            })
        },
        getPrice() {
            var price = null;
            price = this.productInfo.price
            this.productInfo.product_sku.forEach(sku => {
                if (this.checkSku.toString() == sku.specIds.toString()) {
                    //console.log(this.checkSku.toString() +"=="+sku.specIds.toString())
                    price = sku.price
                    this.isSold = sku.stock > 0? false:true
                    this.stock = sku.stock
                    this.checkSkuId = sku.id
                    this.checkSkuImg = sku.productImg? sku.productImg:this.productInfo.mainImg
                    this.checkSpecNames = sku.specNames
                }
            })
            //console.log(price)
            return price
        },
        async onsubmit() {
            if(this.productInfo.stock <= 0) {
                this.$refs.uToast.show({
                    type: 'default',
                    message: "商品已售罄~"
                })
                return
            }
            if (this.productInfo.type == 'nft') {
                if (!this.confirm) {
                    uni.showLoading({
                        title: '正在生成订单'
                    })
                    this.confirm = await nftCreateOrder({ id: this.productInfo.id, number: this.number })
                    uni.hideLoading()
                }
                this.sheetData = {
                    orderId: this.confirm.id,
                    payPrice: this.confirm.payPrice,
                    orderType: "order"
                }
                this.sheetShow = true
                // #ifdef MP-WEIXIN
                uni.requestPayment({
                    provider: 'wxpay',
                    ...payment,
                    success: function (res) {
                        than.$store.dispatch("user/info")
                        than.navigateTo("pages/orderComplete/index",{
                            orderId: than.confirm.id
                        })
                    },
                    fail: function (err) {

                    }
                })
                // #endif
            } else {
                if (this.productInfo.product_sku.length > 0 && !this.checkSkuId) {
                    this.$refs.uToast.show({
                        type: 'default',
                        message: "请选择商品规格"
                    })
                    return
                }
                this.navigateTo('pages/orderConfirm/index',{
                    id: this.productInfo.id,
                    skuId: this.checkSkuId,
                    number: this.number
                })
            }
        },
        onlogin() {
            uni.$u.route('pages/login/index')
            //await this.$store.dispatch("user/login")
        },
        copy(text) {
            uni.setClipboardData({
                data: text + '',
                success: function () {
                    this.$refs.uToast.show({
                        type: 'default',
                        message: "复制成功"
                    })
                },
                fail: function() {
                    console.log('复制失败')
                }
            });
        },
        getSpliceText(str) {
            if (!str) {
                return str
            }
            var sub1 = str.slice(0, 8)
            var sub2 = str.slice(-6)
            return sub1 + '...' +sub2
        },
        navigateTo(path, params={}) {
            uni.$u.route({
				url: path,
				params
			})
        },
        showpopup(isCart=false) {
            this.popupshow = true
            this.isCart = isCart
        },
        closePopup() {
            this.popupshow = false
        },
        count(num) {
           if (this.number <= 1 && num < 0) {
                return
           }
           if (this.number >= this.stock  && num > 0) {
                return
           }
           this.number += num
        },
        async addCartsubmit() {
            if(this.productInfo.stock <= 0) {
                this.$refs.uToast.show({
                    type: 'default',
                    message: "商品已售罄~"
                })
                return
            }
            if (this.productInfo.product_sku.length > 0 && !this.checkSkuId) {
                this.$refs.uToast.show({
                    type: 'default',
                    message: "请选择商品规格"
                })
                return
            }
            var form = {
                productId: this.productInfo.id,
                num: this.number
            }
            if (this.checkSkuId) {
                form.skuId = this.checkSkuId
            }
            const res = await addCart(form)
            this.$refs.uToast.show({
                type: 'default',
                message: "加入购物成功"
            })
            this.popupshow = false
        },
        countChange(e) {
            this.timeData = {
                hours: e.hours + e.days * 24,
                minutes: e.minutes,
                seconds: e.seconds
            }
        },
        async onGrabSubmit(id = null) {
            if (this.$store.getters.identify == 0) {
                this.modalShow = true
                return
            }
            /*wxPay({}, s => {}, e => {
                console.log(e)
            })*/
            var payMoney = this.userTicket? this.userTicket.ticket.discount * this.productInfo.price:this.productInfo.price * 1;
            const res = await createGrabOrder({
                payMoney: payMoney,
                productId: this.productInfo.id,
                userTicketId: this.userTicket? this.userTicket.id:null
            })
            this.$refs.uToast.show({
                type: 'default',
                message: "报名抢购成功"
            })
            this.getData(this.productId)
            this.getUserData()
        },
        async getUserData() {
            this.grabOrderDetail = await getGrabOrderDetail({productId: this.productId})
            if (!this.grabOrderDetail) {
                this.userTicket = await getUserTicket()
            } else  {
                this.userTicket = this.grabOrderDetail.userTicket
            }
        },
        async wxPayment(id) {
            uni.showLoading({
                title: '正在发起支付'
            })
            const grab = await payGrabOrder({
                id: id,
                openId: this.$store.getters.mpOpenId
            })
            const payment = grab.jsapi
            this.grabPayment = {
                appId: payment.appId,
                timeStamp: payment.timeStamp,
                nonceStr: payment.nonceStr,
                package: payment.packageValue,
                paySign: payment.paySign,
                signType: payment.signType
            }
            uni.hideLoading()
            var than = this
            WeixinJSBridge.invoke('getBrandWCPayRequest', {
                appId: payment.appId,
                timeStamp: payment.timeStamp,
                nonceStr: payment.nonceStr,
                paySign: payment.paySign,
                package: payment.packageValue,
                signType: payment.signType
            },
            function(res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    than.navigateTo("pages/orderComplete/index",{
                        grabId: id
                    })
                }
            });
        },
        payCallback(res) {
            this.sheetShow = false
            if (res) {
                if (res.orderType == 'grab') {
                    var params = {
                        grabId: res.id
                    }
                } else if (res.orderType == 'order') {
                    var params = {
                        orderId: res.id
                    }
                }
                this.navigateTo("pages/orderComplete/index", params)
            }
        },
        showPaySheet() {
            this.sheetData = {
                orderId: this.grabOrderDetail.id,
                payPrice: this.grabOrderDetail.payMoney
            }
            this.sheetShow = true
        },
        closeSheet() {
            this.sheetShow = false
        }
    },
    onShareAppMessage() {
        return {
            title: 'ionepin',
            desc: "商品详情",
            path: '/pages/nftDetail/index?productId=' + this.productInfo.id
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        background: #131415;
        .detail-item {
            .detail-title {
                text-align: center;
                color: #ffffff;
                margin-bottom: 47rpx;
            }
        }
        .title {
            width: 636rpx;
            margin-right: auto;
            margin-left: auto;
            margin-bottom: 18rpx;

        }
        .nft-tag {
            width: 100rpx;
            height: 40rpx;
            background: url(https://ionepin.oss-cn-shenzhen.aliyuncs.com/967825cfb630bf72832c10b8d3ed3d64ad249bc8.png) no-repeat;
            background-size: 100% 100%;
            margin: auto;
            margin-bottom: 12rpx;
        }
        .product-image {
            box-sizing: border-box;
            width: 636rpx;
            //height: 949rpx;
            background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/product_border.png) no-repeat;
            background-size: 100% 100%;
            padding: 40rpx 28rpx 40rpx 40rpx;
            margin: auto;
            .image {
                //height: 556rpx;
                width: 100%;
            }
        }
        .dot {
            display: flex;
            justify-content: center;
            margin: 10rpx auto 30rpx auto;
            .dot-item {
                width: 12rpx;
                height: 12rpx;
                background: #2E2F30;
                border-radius: 50%;
                margin-right: 16rpx;
            }
            .dot-action {
                background: #ffffff;
            }
        }
        .product-info {
            padding: 0 26rpx;
            position: relative;
            .spec-info {
                margin-top: 45rpx;
            }
            .spec {
                margin-top: 15rpx;
                display: flex;
                flex-wrap: wrap;
                .spec-tag {
                    box-sizing: border-box;
                    padding: 8rpx 40rpx;
                    border: 1rpx solid #B6B6B6;
                    margin-right: 20rpx;
                    margin-bottom: 20rpx;
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                }
                .selected {
                    border: none;
                    background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/tag_selected.png) no-repeat center;
                    background-size: 100% 100%;
                }
                .disable {
                    border: 1px solid #f4f4f5;
                    background: #f4f4f5;
                    color: #999999;
                }
            }
            .product-stock {
                position: absolute;
                right: 26rpx;
                top: 0;
            }
        }
        .border {
            width: 100%;
            height: 1rpx;
            background: #2E2F30;
            margin: 60rpx 0;
        }
        .nft-info {
            padding: 0 26rpx;
            .input {
                background-color: #2E2F30;
                height: 68rpx;
                padding: 0 18rpx;
                line-height: 68rpx;
                margin-top: 20rpx;
                display: flex;
                align-content: center;
                justify-content: space-between;
                text {
                    font-size: 24rpx;
                    &:nth-child(1) {
                        color: #999999;
                    }
                    &:nth-child(2) {
                        color: #FFFFFF;
                    }
                }
            }
            .text-info {
                background-color: #2E2F30;
                height: 68rpx;
                padding: 0 18rpx;
                line-height: 68rpx;
                margin-top: 20rpx;
                font-size: 24rpx;
                color: #FFFFFF;
            }
        }
        .user {
            background: url(https://img.ionepin.com/0c84978e6f90e4871fb4358b65a20decb1f3ee04.png) no-repeat;
            background-size: 100% 100%;
            width: 100%;
            height: 120rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            .user-image {
                width: 74rpx;
                height: 74rpx;
                border-radius: 37px;
            }
            .user-info {
                margin-left: 18rpx;
                .user-desc {
                    font-size: 22rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #B6B6B6;
                    line-height: 30rpx;
                }
                .user-name {
                    margin-top: 6rpx;
                    font-size: 26rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 37rpx;
                }
            }
        }
        .product-detail {
            width: 100%;
            padding: 0 25rpx 0 25rpx;
            box-sizing: border-box;
        }
        .bottom {
            box-sizing: border-box;
            //padding: 0 20rpx;
            position: fixed;
            bottom: 0rpx;
            left: 0;
            width: 100%;
            .price {
                overflow: hidden;
                .total-price {
                    float: left;
                    text {
                        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
                        font-weight: bold;
                        color: #FFFFFF;

                        &:nth-child(1) {
                            font-size: 22rpx;
                        }

                        &:nth-child(2) {
                            font-size: 34rpx;
                        }
                    }
                }

                .un-total-price {
                    float: left;
                    margin-left: 20rpx;
                    color: #B6B6B6;
                    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
                    font-weight: bold;
                    text-decoration: line-through;
                    text {
                        &:nth-child(1) {
                            font-size: 22rpx;
                        }

                        &:nth-child(2) {
                            font-size: 30rpx;
                        }
                    }
                }
            }
            .btns {
                overflow: hidden;
                position: relative;
                .ticket {
                    position: absolute;
                    top: 0;
                    right: 0;
                }
            }
            .buy {
                height: 100rpx;
                background: #000000;
                overflow: hidden;
                line-height: 100rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 36rpx 0 22rpx;
                .buy-btn {
                    text-align: center;
                    width: 400rpx;
                    height: 68rpx;
                    border-radius: 2px;
                    border: 1px solid #A1A1A1;
                    color: #FFFFFF;
                    font-size: 30rpx;
                    line-height: 68rpx;
                    float: left;
                }
                .rob-btn {
                    width: 400rpx;
                    height: 68rpx;
                    border-radius: 2rpx;
                    border: 1rpx solid #FFFFFF;
                    text-align: center;
                    line-height: 68rpx;
                    color: #ffffff;
                }
            }
            .sold {
                height: 100rpx;
                background: #000000;
                overflow: hidden;
                line-height: 100rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 42rpx 0 56rpx;
                .btn-sold {
                    text-align: center;
                    width: 400rpx;
                    height: 68rpx;
                    color: #999999;
                    font-size: 30rpx;
                    line-height: 68rpx;
                    background: #2E2F30;
                }
                .total-price {
                    float: left;
                    text {
                        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
                        font-weight: bold;
                        color: #FFFFFF;

                        &:nth-child(1) {
                            font-size: 22rpx;
                        }

                        &:nth-child(2) {
                            font-size: 34rpx;
                        }
                    }
                }
            }
        }
        .extend {
            margin: 40rpx 0 140rpx 0;
            padding: 0 25rpx;
            .extend-item {
                .extend-title {
                    //font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    text-align: center;
                    margin: 38rpx 0;
                }
                .extend-content {
                    font-size: 26rpx;
                    font-family: PingFang-SC-Light, PingFang-SC;
                    font-weight: 300;
                    color: #FFFFFF;
                    text-indent: 1.5em;
                }
            }
        }
        .check-sku {
            display: flex;
            padding: 0 26rpx;
            .check-sku-title {
                display:flex;
                justify-content:center;
                align-items:center;
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
            }
            .check-sku-content {
                flex: auto;
            }
        }
        .popup {
            height: 910rpx;
            padding: 29rpx 19rpx 20rpx 32rpx;
            position: relative;
            .sku {
                display: flex;
                .info {
                    margin-left: 19rpx;
                    .text-1 {
                        height: 84rpx;
                    }
                    .text-2 {
                        margin-top: 10rpx;
                    }
                    .text-3 {
                        margin-top: 10rpx;
                    }
                }
            }
            .spec-info {
                margin-top: 50rpx;
            }
            .spec {
                margin-top: 15rpx;
                display: flex;
                flex-wrap: wrap;
                .spec-tag {
                    box-sizing: border-box;
                    padding: 8rpx 40rpx;
                    border: 1rpx solid #B6B6B6;
                    margin-right: 20rpx;
                    margin-bottom: 20rpx;
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                }
                .selected {
                    border: none;
                    background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/tag_selected.png) no-repeat center;
                    background-size: 100% 100%;
                }
                .disable {
                    border: 1px solid #f4f4f5;
                    background: #f4f4f5;
                    color: #999999;
                }
            }
            .buy-num {
                display: flex;
                float: right;
                margin-right: 16rpx;
                .minus {
                    background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_sub.png) no-repeat;
                    background-size: 100% 100%;
                    text-align: center;
                    width: 50rpx;
                    height: 50rpx;
                    color: #FFFFFF;

                }
                .minus-disabled {
                    background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_disabled_sub.png) no-repeat;
                    background-size: 100% 100%;
                }
                .num {
                    width: 100rpx;
                    text-align: center;
                    line-height: 50rpx;
                    font-size: 28rpx;
                }
                .add {
                    background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_add.png) no-repeat;
                    background-size: 100% 100%;
                    text-align: center;
                    width: 50rpx;
                    height: 50rpx;
                }
                .add-disabled{
                    background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_disabled_add.png) no-repeat;
                    background-size: 100% 100%;
                }
            }
            .buy-btn {
                text-align: center;
                background: #000000;
                font-size: 30rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                height: 90rpx;
                position: absolute;
                bottom: 20rpx;
                width: calc(100% - 51rpx);
                line-height: 90rpx;
            }
        }
        .nft-detail {
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            .nft-stock {
                box-sizing: border-box;
                display: flex;
                border-radius: 18rpx;
                border: 1px solid #5065DF;
                height: 36rpx;
                overflow: hidden;
                margin-left: 16rpx;
                .nft-stock-name {
                    box-sizing: border-box;
                    background: #5065DF;
                    padding: 0 11rpx;
                    font-size: 22rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    //line-height: 36rpx;
                    height: 36rpx;
                }
                .nft-stock-content {
                    box-sizing: border-box;
                    font-size: 22rpx;
                    font-family: PingFang-SC-Bold, PingFang-SC;
                    font-weight: bold;
                    color: #AAB7FF;
                    //line-height: 36rpx;
                    text-align: center;
                    padding-left: 9rpx;
                    padding-right: 12rpx;
                    height: 36rpx;
                }
            }
            .nft-info-tag {
                box-sizing: border-box;
                margin-left: 16rpx;
                height: 36rpx;
                background: #5065DF;
                border-radius: 18rpx;
                font-size: 22rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                padding: 3rpx 12rpx;
            }
        }
        .activity {
            box-sizing: border-box;
            background: url("https://img.ionepin.com/8414ff5800cc06b3b31e6c2ff3aa10fce810bb51.png") no-repeat;
            background-size: 100% 100%;
            width: 100%;
            height: 104rpx;
            position: fixed;
            bottom: 100rpx;
            left: 0;
            .activity-title {
                font-size: 20rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                margin-top: 6rpx;
            }
            .activity-info {
                //margin-top: 8rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .activity-info-people {
                    margin-left: 25rpx;
                    text {
                        &:nth-child(1) {
                            font-size: 24rpx;
                            font-weight: 400;
                            color: #C0C7FF;
                            line-height: 33rpx;
                        }
                        &:nth-child(2) {
                            margin-left: 10rpx;
                            font-size: 28rpx;
                            font-weight: bold;
                            color: #FFFFFF;
                            line-height: 40rpx;
                        }
                    }
                }
                .activity-info-time {
                    margin-right: 24rpx;
                    .time {
                        display: flex;
                        text {
                            display: block;
                            font-size: 24rpx;
                            font-weight: bold;
                            color: #F7BA00;
                            margin-left: 8rpx;
                            line-height: 33px;
                        }
                        margin-left: 8rpx;
                        .time__item {
                            font-size: 24rpx;
                            font-weight: bold;
                            color: #F7BA00;
                            line-height: 33px;
                        }
                    }
                }
            }
        }
    }
</style>
